<template>
    <div>
        <el-button size="small" type="primary" round @click="dialogVisible = true">批量导入数据</el-button>
        <el-table :data="classList" style="width: 100%">
            <el-table-column prop="title" label="班级名称" width="180" />
            <el-table-column prop="number" label="班级人数" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger" round>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" title="批量导入数据" width="30%">
            <el-form :model="classForm" label-width="100px" :label-position="'right'" ref="classFormRef">
                <el-form-item label="班级名称" prop="title">
                    <el-input v-model="classForm.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="导入名单" prop="Class">
                    <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleChange" style="width: 100%"
                        :file-list="fileList">
                        <el-button class="ml-3" type="success">选择文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAddForm">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import importExcel from '../../util/ImportExcel'
import axios from 'axios'

const classList = ref([])
const dialogVisible = ref(false)
const classForm = reactive({
    title: '',
    list: []
})

const fileList = ref([])
const classFormRef = ref(null)

onMounted(() => {
    // 调用接口获取班级列表数据
    getList()
})

const handleChange = (e) => {
    console.log(e)
    classForm.title = e.name.split('.')[0]
    importExcel(e.raw, (data) => {
        console.log(data)
        fileList.value = []
        classForm.list = data
    })
}

const handleAddForm = () => {
    dialogVisible.value = false
    addClass()
}

const getList = async () => {
    var res = await axios.get('/adminapi/classes')
    classList.value = res.data
}

const addClass = async () => {
    var classObj = await axios.post('/adminapi/classes', {
        title: classForm.title,
        number: classForm.list.length
    })

    var res = await axios.post('/adminapi/students', {
        list: classForm.list,
        class: classObj.data._id
    })

    if (res.statusText === 'OK') {
        ElMessage({
            message: '添加成功',
            type: 'success'
        })
        await getList()
    } else {
        ElMessage({
            message: '添加失败',
            type: 'error'
        })
    }
    nextTick(() => {
        classFormRef.value.resetFields()
    })
}

const handleDelete = async (row) => {
    axios.delete('/adminapi/classes', {
        data: {
            id: row._id
        }
    })
    // location.reload()
    await getList()
}
</script>